<template>
  <el-card class="list-card">
    <h2>我的报名</h2>
    <el-skeleton v-if="loading" :rows="4" animated />
    <el-empty v-else-if="registrations.length === 0" description="暂无报名" />
    <ul v-else>
      <li v-for="r in registrations" :key="r.id">
        <span>
          活动：{{ r.event.title }} | 
          时间：{{ r.event.startTime }}
        </span>
      </li>
    </ul>
  </el-card>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { registrationApi } from '../api/registration'
import { eventApi } from '../api/event'

const registrations = ref<any[]>([])
const loading = ref(true)
const user = JSON.parse(localStorage.getItem('user') || '{}')

onMounted(async () => {
  if (!user.userId) {
    registrations.value = []
    loading.value = false
    return
  }
  const res = await registrationApi.getUserRegistrations(user.userId)
  // 批量获取活动详情
  const regWithEvent = await Promise.all(
    res.map(async (r: any) => {
      const event = await eventApi.getEvent(r.eventId)
      return { ...r, event }
    })
  )
  registrations.value = regWithEvent
  loading.value = false
})
</script>
<style scoped>
.list-card {
  max-width: 800px;
  margin: 40px auto;
}
</style> 